// ...existing code...
.roleSelect {
  padding: 15px;
  display: flow-root; //区块格式化上下文
  position: relative;
  box-sizing: border-box;
  min-height:calc(100vh - 30px);
  height: 100%;
  .guide{
    .explain{
      font-size: 13px;
    }
  }

  .role{

    .exitRole{
      position: relative;
      &::before{
        content: '';
        display: inline-block;
        color:skyblue;
        font-weight: bold;
        border-top:solid #708775 20px;
        border-left:solid #708775 20px;
        border-right:solid transparent 20px;
        border-bottom:solid transparent 20px;
        position: absolute;
        top:0;
        left: 0;
      }
    }

    @media (max-width:600px) {
       display: grid;
       grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
    }

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;

    li{
      flex: 1  1 20%;
      display: flex;
      height: 100px;
      padding:5px;
      flex-direction: column;
      justify-content: center;
    }
  }
}
// ...existing code...
